<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>地下模式和地表透明</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        input {
            width: 350px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
            margin-bottom: 4px;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:350px; font-size:24px; font-family: 宋体;">
                        <div class="defultbtn" :class="{'btnon':subSurfaceEnabled}"  @click="subSurfaceEnabled = !subSurfaceEnabled">地下模式</div><br/>
                        <span>地表不透明度: {{ surfaceOpacity | numFilter }}</span><br/>
                        <span><input type="range" min="0.0" max="1.0" step="0.01" v-model.number="surfaceOpacity"></span><br/>
                    </div>
                </div>
            `,
            data() {
                return {
                    subSurfaceEnabled: false,
                    surfaceOpacity: 0.0,
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    _bgImagery: undefined,
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                earth.sceneTree.root = {
                    "children": [
                        {
                            "czmObject": {
                                "xbsjType": "Imagery",
                                "name": "谷歌影像",
                                "xbsjImageryProvider": {
                                    "XbsjImageryProvider": {
                                        "url": "//www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}",
                                        "srcCoordType": "GCJ02",
                                        "dstCoordType": "WGS84",
                                        "maximumLevel": 21,
                                    },
                                }
                            },
                        },
                        {
                            "czmObject": {
                                "xbsjType": "Terrain",
                                "name": "地形",
                                "xbsjTerrainProvider": {
                                    "type": "XbsjCesiumTerrainProvider",
                                    "XbsjCesiumTerrainProvider": {
                                        "url": "//lab.earthsdk.com/terrain/577fd5b0ac1f11e99dbd8fd044883638",
                                    }
                                },
                            }
                        },
                        {
                            "czmObject": {
                                "xbsjType": "Model",
                                "url": "../assets/GroundVehicle/GroundVehicle.glb",
                                "minimumPixelSize": 128,
                                "maximumScale": 20000,
                                "xbsjPosition": [2.0313887163962, 0.6963863715457375, 41.7],
                            },
                            "ref": "model1",
                        }
                    ]
                }

                earth.camera.position = [2.031390167954452, 0.6963871245720457, 45.82274205905287];
                earth.camera.rotation = [4.0428248887058125, -0.2997327319549905, 0];

                // // 1.1.2 使用Cesium原生API来添加模型
                // {
                //     // 通过earth.czm.viewer获得viewer
                //     var viewer = earth.czm.viewer;

                //     var position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, -1.5);
                //     var entity = viewer.entities.add({
                //         name: 'GroundVehicle',
                //         position: position,
                //         model: {
                //             uri: '../assets/GroundVehicle/GroundVehicle.glb',
                //             minimumPixelSize: 128,
                //             maximumScale: 20000,
                //             heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                //         }
                //     });

                //     viewer.trackedEntity = entity;
                // }

                // 1.1.3 数据绑定
                // disposers 用来收集资源销毁函数，并在析构时自动调用！
                {
                    this._disposers = [];
                    this._disposers.push(XE.MVVM.bind(this, 'subSurfaceEnabled', earth.terrainEffect, 'subSurfaceEnabled'));
                    this._disposers.push(XE.MVVM.bind(this, 'surfaceOpacity', earth.terrainEffect, 'surfaceOpacity'));

                    // 设置初始值
                    earth.terrainEffect.subSurfaceEnabled = true;
                    earth.terrainEffect.surfaceOpacity = 0.5;
                }

                this._earth = earth;

                // only for debug
                window.earth = earth;
                window.model = earth.sceneTree.$refs.model1.czmObject;
            },
            filters: {
                numFilter(value) {
                    // 截取当前数据到小数点后两位
                    let realVal = parseFloat(value).toFixed(2)
                    return realVal
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._earth = this._earth && this._earth.destroy();
                this._disposers.forEach(d => d());
                this._disposers.length = 0;
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>